/**
 * @author qianrong.yin
 * @description vuex的定义、实例化库
 */

import Vue from 'vue'
import Vuex from 'vuex'

// 引入持久化库 -- persistState 是一个方法，而plugins需要的是一个实例
import PresistState from 'vuex-persistedstate'
// 引入获取权限的接口
import { rightsApi } from '../apis/homeApi'

// 全局插件注册
Vue.use(Vuex)

// 实例化Store类
// const store = new Vuex.Store({
export default new Vuex.Store({
  // 注入插件
  // plugins?: Plugin<S>[];
  // Plugin[] => 它是一个数组，它的每一个属性对象都应该是实例对象
  plugins: [
    new PresistState({
      // 指定存储的位置
      storage: window.sessionStorage
    })
  ],
  // 定义模块
  modules: {
    // 定义模块名字
    common: {
      // 设置命名空间可用
      namespaced: true,

      //  初始化，定义缓存数据对象
      state: {
        token: '',
        userInfo: {},
        userRights: []
      },
      // 定义数据暴露、获取接口 -- getter方法(因为getter方法是一个数据值，而不是一个方法)
      getters: {
        token: ({ token }) => token,
        userInfo: ({ userInfo }) => userInfo,
        userRights: ({ userRights }) => userRights
      },
      // 定义一个扭转state数据的方法
      mutations: {
        setToken (state, token) {
          state.token = token
        },
        setUser (state, user) {
          state.userInfo = user
        },
        setRights (state, rights) {
          state.userRights = rights
        }
      },
      // 定义一个action来定义数据处理业务办法
      actions: {
        tokenAct ({ commit }, token) {
          commit('setToken', 'token-' + token)
        },
        async rightsAct ({ commit }, ids) {
          // 获取服务器的权限数据，然后存储数据
          const result = await rightsApi(ids)
          commit('setRights', result.data)
        }
      }
    }
  }
})
